import React, { Suspense } from 'react'
import routers from './routeConfig'
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";

interface MYPROPS {

}
interface ROUTEPROPS {
    path: string,
    to?: string,
    component?: any,
    children?: ROUTEPROPS[]
}

function RouterViews(props: MYPROPS) {
    let renderDom = (routers:ROUTEPROPS[]) => {
       return routers.map((item:ROUTEPROPS,index:number)=>{
         return <Route path={item.path} key={index} element={
             item.to?<Navigate to={item.to}></Navigate>:<item.component></item.component>
         }>
              {item.children&&renderDom(item.children)}

         </Route>
       })

    }
    return (
      <BrowserRouter>
      <Suspense fallback={<div>loading...</div>}>
          <Routes>
              {
                  renderDom(routers)
              }
          </Routes>
      </Suspense>
      
      </BrowserRouter>
    )
}


export default RouterViews
